/**
* Created by icely on 2017/3/15.
*/
<template>
    <div class="diningModeContainer routerContent">
        <!--<x-header>{{ $route.name }}</x-header>-->
        <scroller lock-x ref="scroller">
            <div>
                <div class="diningMode-header commonRow" v-if="isShowTime">
                    <div class="col-7">
                        <div class="selectDateBox">
                            <span>就餐日期：</span>
                            <datetime v-model="selectDate" @on-change="change" title="" confirm-text="确定" :start-date="currentday1" :end-date="currentday3"
                                      cancel-text="取消"
                                      clear-text="选择时间"></datetime>
                        </div>
                    </div>

                    <div class="col-5 radioBox textAlignRight">

                 <span @click="isLunchchose">
                    <img v-if="isLunch" src="../assets/img/radio_active.png">
                    <img v-else-if="isgray" src="../assets/img/radio_gray.png">
                    <img v-else src="../assets/img/radio_default.png">
                    <label>午餐</label>
                 </span>

                 <span @click="isLunch=false">
                    <img v-if="!isLunch" src="../assets/img/radio_active.png">
                    <img v-else src="../assets/img/radio_default.png">
                    <label>晚餐</label>
                </span>

                    </div>
                </div>

                <div class="diningMode-body">

                    <div class="modeBox mode1" @click="goStorePage(0)"></div>

                    <div class="modeBox mode2" @click="goStorePage(1)"></div>

                    <div class="modeBox mode3" v-if="isHasMode3" @click="goStorePage(2)"></div>

                </div>
            </div>

        </scroller>
    </div>
</template>

<script>
    import {Datetime, XButton, Group, Cell, Confirm, XHeader, Scroller} from 'vux'

    import {mapState, mapActions} from 'vuex'

    import {diningWayService} from '../services/index'

    export default {
        components: {
            Datetime,
            XButton,
            Group,
            Cell,
            Confirm,
            XHeader,
            Scroller
        },
        beforeRouteEnter(to,from,next){
            next(vm=> {
                vm.change();
            });
        },
        activated(){
            this.isShowTime = this.$route.query.isShowTime == '1' ? false : true;
            this.stStoreId = this.$route.query.stStoreId || '';
            this.getDiningWay();
        },

        mounted(){

        },
        watch: {
            islunchother(value,old){
                this.selectDate = value;
                this.islunchother = value;
                console.log("this.islunchother");
                console.log(this.islunchother);
                console.log(this.currentday1);
                if(this.islunchother === this.currentday1){
                    if(this.currentdayhours >= 12) {
                        this.isLunch = false;
                        this.isgray = true;
                    }
                }else{
                    this.isgray = false;
                }
            }
        },
        created(){

        },
        computed: {

        },

        data () {
            return {
                selectDate : '',
                isLunch: true,
                isShowTime: false,
                isHasMode3: false,
                islunchother:"", //直接拿v-model拿不了值，换种方式
                isgray:false,
                stStoreId:'',
                currentday1:"",
                currentday3:"",
                currentdayhours:"",
                testdata:"",
                testdata3:"",
                mini:"",
                mimi:"",
            }
        },
        methods: {
            ...mapActions([
                'updateIsPackage',
                'updateIsLunch',
                'updateBookingTime',
                'updatePackageType',
                'updateDiningModeType'
            ]),
            change (value) {
                this.updateBookingTime(value);
                this.selectDate = value;
                this.islunchother = value;
            },
            isLunchchose(){
                if(this.islunchother === this.currentday1){
                    if(this.currentdayhours >= 12){
                        return;
                    }
                };
                this.isLunch=true;
            },
            goStorePage(isPackage){
                this.updateIsPackage(isPackage);
                this.updatePackageType(isPackage);
                if (this.isLunch) {
                    this.updateIsLunch(0);
                } else {
                    this.updateIsLunch(1);
                }
                this.$router.push({
                    name: 'xstore',
                    query: {
                        stStoreId: this.stStoreId || ''
                    }
                })
            },
            getDiningWay(){
                const stStoreId = window.localStorage.getItem('stStoreId') || this.stStoreId;
                diningWayService().save({stStoreId: stStoreId}).then((res) => {
                    const body = res.body;
                    if (body && body.code == 200) {
                        let currentday1 = body.currentTime;
                        let currentday3 = body.currentTime + 2*24*3600*1000;

                        currentday1 = new Date(currentday1);
                        currentday3 = new Date(currentday3);
                        currentday1 = currentday1.toLocaleDateString().replace(/\//g, "-") + " " + currentday1.toTimeString().substr(0, 8)
                        currentday3 = currentday3.toLocaleDateString().replace(/\//g, "-") + " " + currentday3.toTimeString().substr(0, 8)

                        this.testdata = currentday1.split(" ")[0];
                        this.testdata3 = currentday3.split(" ")[0];
                        if(/[\u4E00-\u9FA5]/.test(this.testdata)){
                            //兼容某些iPhone的时间格式包含年月日
                            this.mini = this.testdata.split("年")[1].split("月")[0] < 10 ? "0"+this.testdata.split("年")[1].split("月")[0] : this.testdata.split("年")[1].split("月")[0];
                            this.mimi = this.testdata.split("月")[1].split("日")[0] < 10 ? "0"+this.testdata.split("月")[1].split("日")[0] : this.testdata.split("月")[1].split("日")[0];
                            this.testdata = this.selectDate = this.currentday1 = this.testdata.split("年")[0] + "-" + this.mini + "-" + this.mimi;
                            this.currentday3 = this.testdata3.split("年")[0] + "-" + this.testdata3.split("年")[1].split("月")[0] + "-" + this.testdata3.split("月")[1].split("日")[0];
                        }else{
                            this.mini = this.testdata.split("-")[1] < 10 ? "0"+this.testdata.split("-")[1] : this.testdata.split("-")[1];
                            this.mimi = this.testdata.split("-")[2] < 10 ? "0"+this.testdata.split("-")[2] : this.testdata.split("-")[2];
                            this.selectDate = this.currentday1 = this.testdata.split("-")[0] + "-" + this.mini + "-" + this.mimi;
                            this.currentday3 = currentday3.split(" ")[0];
                        }

                        this.currentdayhours = currentday1.split(" ")[1].split(":")[0];

                        if(this.islunchother === this.selectDate){
                            if(this.currentdayhours >= 12){
                                this.isLunch = false;
                                this.isgray = true;
                            };
                        }
                        if (body.data.type == '2') {
                            this.isHasMode3 = true;
                        }
                    }
                });
            },
        },
        updated(){
            this.$nextTick(() => {
                this.$refs.scroller.reset()
            })
        }
    }
</script>

<style lang="less" rel="stylesheet/less">

    .diningModeContainer {

        background: rgb(240, 240, 240);
        padding: 0rem 0.7rem;

        * {
            font-size: 0.8rem;
        }

        .diningMode-header {
            padding: 0.5rem 0rem 0rem 0rem;

            > [class^='col-'] {
                padding: 0px;
                line-height: 1.5rem;
            }

            /* 选择日期 */
            .selectDateBox {
                display: flex;

                .vux-datetime {
                    flex: 1;
                    background: #ffffff;
                    border: 1px solid rgba(0, 0, 0, 0.1);
                    border-radius: 3px;
                    padding: 0rem;

                    .vux-datetime-value {
                        text-align: center;
                    }
                }
            }

            /* 单选按钮 */
            .radioBox {

                /* 午餐/晚餐 */
                > span {
                    * {
                        vertical-align: middle;
                    }
                    :last-child {
                        margin-left: 0.3rem;
                    }
                }
                img {
                    width: 0.8rem;
                }
            }
        }

        .diningMode-body {
            padding-top: 0.6rem;
            /* 堂食/打包 */
            .modeBox {
                height: 8.5rem;
                width: 100%;
                margin-bottom: 0.6rem;

            }
            .mode1 {
                background: url("../assets/img/diningMode-bg1.png") no-repeat;
                background-size: 100% 100%;

            }
            .mode2 {
                background: url("../assets/img/diningMode-bg2.png") no-repeat;
                background-size: 100% 100%;

            }
            .mode3 {
                background: url("../assets/img/diningMode-bg3.png") no-repeat;
                background-size: 100% 100%;

            }
        }

    }


</style>